<!-- 队长平仓 -->
<template>
    <div>
        <div class="content">
            <div class="content-item-top">
                <el-tabs
                    v-model="activeName"
                    class="demo-tabs-1"
                    @tab-change="handleClick"
                >
                    <el-tab-pane label="市价" name="1">

                        <!-- 可用余额 -->
                        <p class="text">可用余额:&nbsp;<span>{{ account.available }}</span></p>
                        <!-- 输入开仓数量 -->
                        <div class="order-item-size">
                            <div class="label-text">
                                <span class="label">合约数量:</span>
                                <el-input-number v-model="creatOrderOperation.size" :disabled="true" :min="0" :step="1" :max="100" @change="handleChange" />
                            </div>
                            
                        </div>
                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">平仓价格:</p>
                            </div>
                            <div class="label-text-btn">
                                市价
                            </div>
                        </div>

                        <div class="order-item-oprater" v-if="!account.in_dual_mode">
                            <div class="label-text">
                                <p class="text">平仓操作(单仓模式)【市价】:</p>
                            </div>
                            <div class="item" @click="closePosition(1,'t-pingcang-shijia','market')">
                                <div class="btn green">
                                    <div class="center">平仓</div>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-oprater" v-else>
                            <div class="label-text">
                                <p class="text">平仓操作(双仓模式):</p>
                            </div>
                            <div class="item" @click="closePosition1(1,'t-pingduo-shijia','market','close_long')">
                                <div class="btn green">
                                    <div class="center">平多</div>
                                </div>
                            </div>
                            <div class="item" @click="closePosition2(-1,'t-pingkong-shijia','market','close_short')">
                                <div class="btn red">
                                    <div class="center">平空</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="限价" name="2">

                        <!-- 可用余额 -->
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="除去订单和仓位保证金后的余额"
                                placement="top"
                            >
                                可用余额:
                            </el-tooltip>
                            &nbsp;<span>{{ account.available }}</span></p>
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="开仓所需的初始保证金"
                                placement="top"
                            >
                                仓位保证金:
                            </el-tooltip>
                            &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                        <!-- 输入开仓数量 -->
                        <div class="order-item-size">
                            <div class="label-text">
                                <span class="label">合约数量:</span>
                                <el-input-number :disabled="true" v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                            </div>
                        </div>

                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">平仓价格(限价):</p>
                            </div>
                            <el-input
                                    v-model="creatOrderOperation.price"
                                    size="large"
                                    style="text-align: center;"
                                    placeholder="请输入开仓价格"
                                    @input="handleChangeInput"
                            >
                            <template #prepend>价格(USDT)</template>
                            </el-input>
                        </div>
                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">平仓策略(限价):</p>
                            </div>
                            <el-select v-model="creatOrderOperation.tif" placeholder="请选择策略" size="large" style="width: 320px;">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </div>

                        <div class="order-item-oprater" v-if="!account.in_dual_mode">
                            <div class="label-text">
                                <p class="text">开仓操作(单仓模式)【限价】:</p>
                            </div>
                            <div class="item">
                                <div class="btn green" @click="closePosition(1,'t-pingcang-xianjia','limit')">
                                    <div class="center">平仓</div>
                                </div>
                            </div>
                        </div>
                        <div class="order-item-oprater" v-else>
                            <div class="label-text">
                                <p class="text">平仓操作(双仓模式):</p>
                            </div>
                            <div class="item" @click="closePosition1(1,'t-pingduo-shijia','limit','close_long')">
                                <div class="btn green">
                                    <div class="center">平多</div>
                                </div>
                            </div>
                            <div class="item" @click="closePosition2(-1,'t-pingkong-shijia','limit','close_short')">
                                <div class="btn red">
                                    <div class="center">平空</div>
                                </div>
                            </div>
                        </div>

                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { captainOprate } from "@/store/captainOprate.js"
import { onMounted , reactive} from "vue"

const store = captainOprate()
const activeName = store.activeName_sub_1
const account = reactive(store.account)
const creatOrderOperation = reactive(store.creatOrderOperation)
const options = reactive(store.options)

function handleClick(tab) {
    store.updatedActiveNameSub1(tab)
}
function handleChange(){
    store.updatedaOrderSize(creatOrderOperation.size)
}


onMounted(() => {
})

</script>

<style lang="scss" scoped>

</style>